<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/v2/console/common/taglibs.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
String contextPath = request.getContextPath();
%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content="width=device-width, minimum-scale=1,initial-scale=1, maximum-scale=1, user-scalable=1" id="viewport" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
   <!--  <link rel="stylesheet" type="text/css" href="css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/schoolHot.css"/>
    <script src="js/mui.min.js"></script>
    <script src="js/mui.pullToRefresh.js"></script>
    <script src="js/mui.pullToRefresh.material.js"></script>
    <script src="js/jquery-1.6.2.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="${path}/toutiao/css/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="${path}/toutiao/css/schoolHot.css"/>
    <script src="${path}/toutiao/js/jquery-1.6.2.min.js"></script>
    <script src="${path}/toutiao/js/template.js"></script>
    
    <title>小咖头条</title>
</head>
<style>
  .tips .mui-active{
   	background: red!important;
   }
</style>
<body>
<div  class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted fixledTop" >
    <div class="mui-scroll fixledTop nav" id="categoryOrderId">
		<!-- 栏目位置 -->
    </div>
    <a href="${path }/Mydetail/Mysummary.html"><span class="nav1"></span></a> 
</div>
<div class="wire"></div>
<!-- 带轮播图  begin-->
<div id="myLayout" >
<div class=" fullCountryHotspot navtitle0" flag="one" >
    <div id="slider" class="mui-slider">
        <div class="mui-slider-group mui-slider-loop" id="bannerOrderId">
            <!--额外增加的一个节点(循环轮播：第一个节点是最后一张轮播)-->
         
         </div>
        <div class="mui-slider-indicator point">
            <div class="mui-indicator mui-active"></div>
            <div class="mui-indicator"></div>
        </div>
        <div class="bannerCon">
            <p class="bannerConP1"style="display: block;">南笙姑娘网上走红</p>
            <p class="bannerConP2"style="display: none">小海豹网上走红</p>
        </div>
    </div>
    <div id = "newsOrderId" >
 
    </div>
</div>
<!-- 带轮播图  end-->

<div style="display:none" class="schoolEye navtitle2" flag="three">
      <div class="list pt10 clearfix pb10">
        <div class="left ml10 fl"><img src="${path }/toutiao/img/listpicture.jpg" alt=""/></div>
        <div class="right fl pl10">
            <p>2016五月的鲜花 — 我的中国梦全国大学生主题文艺活动专题节目</p>
            <p class="fr">
                <img src="${path }/toutiao/img/listhand.png" alt="."/>
                <span >1270人已阅读</span>
            </p>
        </div>
    </div>
</div>



</div>
<!--<script src="http://cdn.bootcss.com/jquery/3.1.0/core.js"></script>-->
<!-- 栏目-模板一 -->
<script id="category" type="text/html">
	{{each data as value i}}
		{{if (i==0)}}
			<a class="mui-control-item mui-active mui-item1" categoryId="{{data[i].id}}" id="a_{{data[i].id}}" currentPage="1">
     			 {{data[i].categoryName}}
        	</a><!--
		{{/if}}
		{{if (i!=0)}}
			--><a class="mui-control-item mui-item{{i+1}}" categoryId="{{data[i].id}}" id="a_{{data[i].id}}" currentPage="1">
     		       {{data[i].categoryName}}
       		</a><!--
		{{/if}}
    {{/each}}
</script>
<!-- banner图循环begin -->
<script id="newsBanner" type="text/html">
		{{each data as value i}}
		{{if (i==0)}}
			<div class="mui-slider-item mui-slider-item-duplicate">
                <a href="{{data[len-1].redirectUrl}}">
                    <img src="{{beforeUrl}}{{data[len-1].imgUrl}}" alt=""/>
                </a>
			</div>
		{{/if}}
		{{if (i==0)}}
			<div class="mui-slider-item">
                <a href="{{data[0].redirectUrl}}">
                    <img src="{{beforeUrl}}{{data[0].imgUrl}}" alt=""/>
                </a>
			</div>
		{{/if}}	
		{{if (i!=0)}}
			<div class="mui-slider-item">
                <a href="{{data[i].redirectUrl}}">
                    <img src="{{beforeUrl}}{{data[i].imgUrl}}" alt=""/>
                </a>
            </div>
		{{/if}}
		{{if (i==len-1)}}
			<div class="mui-slider-item mui-slider-item-duplicate">
                <a href="{{data[0].redirectUrl}}">
                    <img src="{{beforeUrl}}{{data[0].imgUrl}}" alt=""/>
                </a>
			</div>
		{{/if}}
    {{/each}}
</script>
<!-- banner图循环end -->
<!-- 新闻列表内容循环begin -->
<script id="news" type="text/html">
	{{each data as value i}}
			<a href="${path}/newsdetail/newsdetail.html?newsId={{data[i].id}}"><div class="list pt10 clearfix pb10">
      		  <div class="left ml10 fl"><img src="{{beforeUrl}}{{data[i].titleSmallImgUrl}}" alt=""/></div>
      			  <div class="right fl pl10">
         	  		 <p>{{data[i].title}}</p>
           				 <p class="fr">
               				 <img src="${path }/toutiao/img/listhand.png" alt="."/>
               			 <span >{{data[i].readership}}人已阅读</span>
           				 </p>
        		  </div>
   			   </div>
			</a>
    {{/each}}
</script>
<!-- 新闻列表内容循环end -->
<!-- 栏目对应div循环  begin-->
<script id="lay" type="text/html">
	{{each data as value i}}
  {{if (i==0)}}
	<div class="fullCountryHotspot navtitle{{i}}" flag="one"  >
		{{if (data[i].pageMark==1)}}
		<div class="mui-content">
			<div id="slider" class="mui-slider">
     		   <div class="mui-slider-group mui-slider-loop" id="bannerOrderId">
					{{each bannerData as value j}}
						{{if (j==0)}}
							<div class="mui-slider-item mui-slider-item-duplicate">
                				<a href="{{bannerData[j].redirectUrl}}">
                   					 <img src="{{beforeUrl}}{{bannerData[j].imgUrl}}" alt=""/>
									 <p class="mui-slider-title">{{bannerData[j].bannerName}}</p>
               					 </a>
							</div>
							<div class="mui-slider-item">
               					 <a href="{{bannerData[0].redirectUrl}}">
                   					 <img src="{{beforeUrl}}{{bannerData[0].imgUrl}}" alt=""/>
 									 <p class="mui-slider-title">{{bannerData[0].bannerName}}</p>
                				 </a>
           					</div>
						{{/if}}
						{{if (j!=0)}}
							<div class="mui-slider-item">
               					 <a href="{{bannerData[j].redirectUrl}}">
                   					 <img src="{{beforeUrl}}{{bannerData[j].imgUrl}}" alt=""/>
 									 <p class="mui-slider-title">{{bannerData[j].bannerName}}</p>
                				 </a>
           					</div>
						{{/if}}
						{{if (j==len-1)}}
							<div class="mui-slider-item mui-slider-item-duplicate">
               					 <a href="{{bannerData[0].redirectUrl}}">
                    					<img src="{{beforeUrl}}{{bannerData[0].imgUrl}}" alt=""/>
										<p class="mui-slider-title">{{bannerData[j].bannerName}}</p>
               					 </a>
							</div>
						{{/if}}
    				{{/each}}
         		</div>
        		<div class="mui-slider-indicator mui-text-right tips">
					{{each bannerData as value k}}
						{{if (k==0)}}
           					<div class="mui-indicator mui-active"></div>
						{{/if}}
						{{if (k>0)}}
           			 		<div class="mui-indicator"></div>
						{{/if}}
					{{/each}}
       			 </div>
   		   </div>
		</div>
		{{/if}}
  {{/if}}
  {{if (i>0)}}
	<div style="display:none" class="fullCountryHotspot navtitle{{i}}" flag="three"  >
  {{/if}}
            <div id="list_{{data[i].id}}">	
			  
              </div>
	  </div>
	
    {{/each}}
</script>
<!-- 栏目对应div循环  end-->




<script type="text/javascript">

	/*newStudentPointTo 新生指南切换更多*/
   var flag="flag";
   var cateId = "";
   var oneFlag = true;
   var threeFlag = true;
   var action = "tab";
    $(function () {
         var before = "";
         before = '${beforeUrl}';
         
         var data = ${list};
         var newsData =${newsList};
         var bannerData = ${bannerList}
         
         var myCategory=new Object();
         myCategory.data=data;
         
         var mydata=new Object();
         mydata.data=data;
         mydata.beforeUrl = before;
         mydata.bannerData =bannerData; 
         mydata.len = bannerData.length;
         
         var myNews = new Object();
         myNews.data=newsData;
         myNews.beforeUrl = before;
         
         //分类模板请求，拼接 
 		var html = template('category', myCategory);
 		document.getElementById('categoryOrderId').innerHTML = html; 
 		//全局页面
 		var html = template('lay',mydata);
 		document.getElementById('myLayout').innerHTML = html;
 		//新闻拼接
 		var html = template('news',myNews);
 		document.getElementById('list_'+data[0].id).innerHTML = html;
 		//页面标示
 		var pageFlag=data[0].pageMark;
    	if(pageFlag*1 == 1){
    		flag="one";
    	}else if(pageFlag*1 == 2) {
    		flag="two";
    	}else if(pageFlag*1 == 3) {
    		flag="three";
    	}
    	
    	cateId = data[0].id;//第一次加载将栏目ID赋值
   		mui('.newStudent-title').on("tap", 'p', function () {
        console.log($(this))
        $('.newStudent-title p').parent().parent().hide();
        $(this).parent().parent().show();
        })
        ////////////////////////////////////////
        var winW=document.documentElement.clientWidth;
        /* console.log(winW) */
        var fontSize=100;
        var dew=375;
        var rem=dew/fontSize;
        //    if(winW>dew){
        //        winW = dew;
        //        alert(winW);
        //    }
        document.documentElement.style.fontSize=winW/rem+"px"
        ///////////////////////////////////////    /*导航切换*/
         mui(".nav").on("tap","a",function(){
           document.documentElement.scrollTop=0;
           document.body.scrollTop=0;
           $(".nav a").length;
           console.log($(".nav a").length);
           console.log($(this).index());
           for(var i=0;i<$(".nav a").length;i++){
                $(".navtitle"+i).css({"display":"none"});
           }
            $(".navtitle"+$(this).index()).css({"display":"block"});
            flag=$(".navtitle"+$(this).index()).attr("flag");
	            //切换动作
	            var categoryId = $(this).attr("categoryId");
	            cateId = categoryId;
	            action = "tab";
	            //alert("categoryId="+categoryId+"+cateId"+cateId)
	            //cuPage =  $(this).attr("currentPage");
	            var contentDivId="list_"+categoryId;
	             var divLen = document.getElementById(contentDivId).innerHTML;
	            if(divLen.trim().length==0){ 
	            	/* alert("切换进入请求"); */
		            $.ajax({
						type : "post",
						url : "${path}/newsHome/queryNewsByCategoryId.html",
						dataType : "json",
						async : false,//异步
						data : {categoryId:categoryId},
						success : function(data) {
							loadContentDivList4tab(contentDivId,data.po.datasource,data.beforeUrl);
						}
		            })
	             } 
            
        })
     ////////////////////////////////////////////////////////    /*全国热点滚动加载*/
        $(window).scroll(function() {
            var scrollTop = $(this).scrollTop();
            var windowHeight = $(this).height();
            var scrollHeight = $(document).height();
            if (scrollTop + windowHeight == scrollHeight) {
            	if(flag=="one"){
	           		 //fullCountryHotspot();/*全国热点*/
	           		 action = "up";
	           		 /* cateId = $("#a_"+cateId).attr("currentPage"); */
	           		 if(oneFlag){
	           			upLoad(cateId,"oneFlag");
	           		 }
            	}else if(flag=="three"){//除首页以外其他页面分页加载
            		/* alert("触发上拉事件！"); */
            		/* alert(flag); */
            		action = "up";
            		if(threeFlag){
	           			upLoad(cateId,"threeFlag");
	           		 }
            	/* 	schoolEye(); */
            	}else if(flag=="four"){
            		schoolRecommend();
            	}else if(flag=="six"){
            		sectionGoodPicture();
            	}else if(flag=="seven"){
            		videoSelection();
            	}
            }
        });
        ///////////////////////////////////////////////
        /*自动轮播*/
        var slider = mui("#slider");
        				slider.slider({
        					interval: 4000
        });
        
        
    });
    	//上拉请求数据
    	function upLoad(cateId,flag){
    		/* alert("上拉cateId="+cateId+"-"+"flag="+flag); */
    		
    		var tempCuPage=$("#a_"+cateId).attr("currentPage");
    		
    		$.ajax({
				type : "post",
				url : "${path}/newsHome/queryNewsByCategoryId.html",
				dataType : "json",
				async : false,//异步
				data : {categoryId:cateId,start:tempCuPage*5},
				success : function(data) {
					
					//alert("attr "+$("#a_"+cateId).attr("currentPage")+"admin"+data.po.currentPage*1);
					
					var tempDivId = "list_"+cateId;
					/* document.getElementById().attr("currentPage",tempCuPage); */
					//拼接数据
					loadContentDivList4up(tempDivId,data.po.datasource,data.beforeUrl);
					
					if(data.po.datasource.length==0){
						if("oneFlag".equals(flag)){
							oneFlag = false;//用于判断是否还去请求方分页数据	
						}
						if("threeFlag".equals(flag)){
							threeFlag = false; //用于判断是否还去请求方分页数据
						}
						
					}else{//返回数据长度不为0 再设置分页
					    $("#a_"+cateId).attr("currentPage",data.po.currentPage*1);
						
					}
				}
            })
    	}
	    //上拉加载拼接
	    function loadContentDivList4up(tempDivId,datasource,beforeUrl){
	    	/* alert("up载拼接tempDivId="+tempDivId+"+datasource="+datasource+"+beforeUrl="+beforeUrl); */
	    	if(action == "up"){
	        	var newsData = datasource;//请求后台返回数据
	            before = ""+beforeUrl+"";
	            var myNews = new Object();
	            myNews.data=newsData;
	            myNews.beforeUrl = before;
	        	 var html = template('news',myNews);
	       		 var oldHtml=document.getElementById(tempDivId).innerHTML;
	       		 oldHtml+=html;
	        	 document.getElementById(tempDivId).innerHTML = oldHtml;
	    	}
	    }
	  //切换加载数据
	    function loadContentDivList4tab(divId,dataSource,beforeUrl){
	    	/* alert("进入拼接4tab"); */
	        var newsData = dataSource;//请求后台返回数据
	        var before = "";//请求返回url
	        before = ""+beforeUrl+"";
	        var myNews = new Object();
	        myNews.data=newsData;
	        myNews.beforeUrl = before;
	    		var html = template('news',myNews);
				var oldHtml=document.getElementById(divId).innerHTML;
				oldHtml+=html;
	    		document.getElementById(divId).innerHTML = oldHtml;
	     }
    options = {
        scrollY: false, //是否竖向滚动
        scrollX: true, //是否横向滚动
        startX: 0, //初始化时滚动至x
        startY: 0, //初始化时滚动至y
        indicators: true, //是否显示滚动条
        deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
        bounce: true, //是否启用回弹
    }
</script>
<script src="${path}/toutiao/js/mui.min.js"></script>
    <script src="${path}/toutiao/js/mui.pullToRefresh.js"></script>
    <script src="${path}/toutiao/js/mui.pullToRefresh.material.js"></script>
<script type="text/javascript">
   		var clientUrl = window.location.href;
   		var targetUrl = "<%=basePath%>newsHome/newsIndex.html"
        var reqPath="<%=basePath%>newsHome/getJSConfig.html";
        var link="<%=basePath%>newsHome/wxShare.html";
        var title = "校咖头条";
        var desc = "看你想看的";
        var imgUrl = "<%=basePath%>toutiao/img/xiaoka.png";
  		window.onload=weixinShare({
  			clientUrl:clientUrl,//当前页面所在的浏览器URL全路径
  			targetUrl:targetUrl,//跳转目标url
  			reqPath:reqPath,//获取微信js授权的请求路径
  			title: title, // 分享标题
		    desc: desc, // 分享描述
		    link: link, // 分享链接
		    imgUrl:imgUrl, // 分享图标
		    type: '', // 分享类型,music、video或link，不填默认为link
		    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
  		});
   	</script>
</body>
</html>
